@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-status';

$label-typography: (
  'xs': $sans-label-s,
  's': $sans-label-m
);
$sizes: 'xs', 's';

.container {
  display: inline-flex;
  align-items: center;

  &[data-has-background] {
    background-color: $sys-neutral-decor-default;

    @each $size in $sizes {
      &[data-size='#{$size}'] {
        @include composite-var($status, 'background-container', $size);
      }
    }
  }

  @each $size in $sizes {
    &[data-size='#{$size}'] {
      @include composite-var($status, 'container', $size);

      .label {
        @include composite-var($label-typography, $size);
      }
    }
  }
}

.label {
  color: $sys-neutral-text-support;
}
